<template>
    <div id="systemSnapshot">
        <p class="title">实时快照</p>

        <div class="container" id="container" ref="container">

            <header class>
                <div v-for="(item, index) in tabTopList" :key="index" @click="onTabTop(index, item)" :class="{ aside_top_nav_active: item.check }">
                    <img :src="item.img" alt />
                    <span class="tab_btn_title">
                        <p class="title">{{ item.title }}</p>
                        <p class="value">
                            {{ item.value }}
                            <span>条</span>
                        </p>
                    </span>
                </div>
            </header>
            <section>
                <header class="tab_header">
                    <span>快照类型</span>
                    <span>生成时间</span>
                    <span>事件详情</span>
                    <span>定位</span>
                    <span>视频</span>
                    <span>处理意见</span>
                    <span>确认状态</span>
                </header>
                <el-table v-loading="loading" :data="allSnapshoot" style="width: 100%"></el-table>
                <ul>
                    <li v-for="(item, index) in allSnapshoot" :key="index">
                        <span class="typeIco">
                            <img :src="item.typeIcon" alt="" />
                            <!-- <span :class="item.spanTextColor">{{ item.typeSz }}</span> -->
                            <span>{{ item.typeSz }}</span>
                        </span>
                        <span>{{ item.time }}</span>
                        <span :title="item.eventMsg">{{ item.eventMsg }}</span>
                        <span title>
                            <i class="iconfont icondingwei"></i>
                        </span>
                        <span v-if="item.relatedVideoState" @click="onVideo(item)">
                            <i class="iconfont iconshipin"></i>
                        </span>
                        <span v-else> </span>
                        <span :title="item.procAdviceMsg">{{ item.procAdviceMsg }}</span>
                        <span @click="onTBC(item, item.bConfirmed ? 1 : 0)">
                            <p title :class="item.bConfirmed ? 'confirmedColor' : 'spanTextColor_gz'">{{ item.bConfirmed ? '已确认' : '待确认' }}</p>
                        </span>
                    </li>
                </ul>
            </section>
            <footer v-if="total" class="anologueEquipPaging">
                <el-pagination small background @size-change="handleSizeChange" @current-change="handleCurrentChange" :pager-count="7" :page-sizes="[15, 25, 50, 100]" :page-size="25" layout="sizes, prev, pager, next, jumper" :total="total" ref="pagination"></el-pagination>
            </footer>
        </div>
        <!-- 录像回放 -->

        <el-dialog class="video-main" :visible.sync="videoShow" :close-on-click-modal="false" @close="onCloseVideo" width="800px" height="550px" top="10vh" center>
            <p class="video-title">{{videoName}}</p>
            <GWVideoPlaybackCom :GWVideoPlaybackComValue="videoValue" class="primary-icon" @click.native="onBtnClose()"></GWVideoPlaybackCom>
        </el-dialog>

        <el-dialog class="confirmed" :visible.sync="confirmedNo" @close="closeEquipDialog" width="500px" height="300px" top="10vh" :close-on-click-modal="false" center>
            <!-- <div @click="closeEquipDialog()" class="close-btn"><i class="iconfont iconguanbi"></i></div> -->
            <p class="title">待确认：{{ popType }}</p>
            <div class="tbc_main">
                <div class="time_box">
                    <p>时间</p>
                    <span class>{{ popTime }}</span>
                </div>
                <div class="incident">
                    <p>事件</p>
                    <span>{{ popIncident }}</span>
                </div>
                <div v-if="wuBaoShow" class="radios">
                    <p>确认本次告警是否为误报</p>
                    <el-radio v-model="radio1" @change="radioVla()" label="1" border size="mini">是</el-radio>
                    <el-radio v-model="radio1" @change="radioVla()" label="0" border size="mini">否</el-radio>
                </div>
                <div class="textarea">
                    <p>处理意见</p>
                    <textarea rows="3" cols="20" v-model="handlingSuggestion" style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 100%;height: 100px;padding: 10px;resize: none;" placeholder="请输入处理意见"></textarea>
                </div>
            </div>
            <div class="btn">
                <span @click="closeEquipDialog">取消</span>
                <span v-if="onAffirmShow" @click="onAffirm">确认</span>
                <span v-else>确认中</span>
            </div>
        </el-dialog>
        <el-dialog class="confirmed" :visible.sync="confirmedOk" @close="closeEquipDialog" width="500px" top="10vh" :close-on-click-modal="false" center>
            <p class="title">已确认：{{ popType }}</p>
            <div class="tbc_main">
                <div class="time_box">
                    <p>时间</p>
                    <span class>{{ popTime }}</span>
                </div>
                <div class="incident">
                    <p>事件</p>
                    <span>{{ popIncident }}</span>
                </div>
                <div class="incident">
                    <p>处理意见</p>
                    <span>{{ popConfirmremark }}</span>
                </div>
                <div class="qr_time">
                    <p>确认人</p>
                    <span>{{ popAdmin }}</span>
                </div>
                <div class="qr_time">
                    <p>确认时间</p>
                    <span>{{ acknowledgingTime }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import systemSnapshot from './systemSnapshot.js';
export default systemSnapshot;
</script>
<style lang="scss" src="./systemSnapshot.scss" scoped></style>
